<template>
	<!-- 推荐客户 -->
	<view>
		<u-sticky bgColor="#fff">
			<view class="search">
				<view class="searchchild">
					<u-search placeholder="请输入关键词搜索" v-model="keyword" @search="init" :showAction="false"></u-search>
				</view>
			</view>
		</u-sticky>
		<view class="flexcenter" style="margin-top: 300rpx;" v-if="!list.data.length">
			<view class="placeholderimage"></view>
		</view>
		<view class="listfather" style="padding-bottom: 120rpx;">
			<view class="list" v-for="(item,index) in list.data" :key="index">
				<view class="list_left">
					<view class="list_left_top">{{item.username}}</view>
					<view class="list_left_bottom" @click="callPhone(item.mobile)">
						<text>电话：{{item.mobile}}</text>
						<image src="../../../static/smallIcon/phone.png" mode=""></image>
					</view>
				</view>
				<view class="list_right margin_top2">加入时间:{{item.rec_time_text}}</view>
			</view>
		</view>
		<view class="posibottom" style="bottom: 30rpx;">
			<view class="onebox flexcenter flex_wrap">
				<view class="huangse">共{{list.total}}个</view></view>
		</view>
	</view>
</template>

<script>
	import conmon from '@/commonFun/conmon.js';
	import httpRequest from '@/commonFun/httpRequest.js';
	export default {
		data() {
			return {
				// 分页处理数据
				page: 1,
				limit: 10,
				list: {
					data: []
				},
				keyword: '',
			};
		},
		onShow() {
			this.init()
		},
		methods: {
			callPhone(num) {
				uni.makePhoneCall({
					phoneNumber: num.toString(), //电话号码
					success: function(e) {
						console.log(e);
					},
					fail: function(e) {
						console.log(e);
					},
				})
			},
			init(isPage, page) {
				let _this = this;
				httpRequest.request('/customapi/user/myTeam', 'POST', {
					page: page || 1,
					limit: _this.limit,
					keywords: _this.keyword,
				}, false, false, true).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list.data;
						if (isPage == true) {
							_this.list.data = dataList.concat(resList.data);
						} else {
							_this.list = resList
							_this.list.data = resList.data;
						}
					} else {
						httpRequest.toast(res.msg);
					}
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.lastpage <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
		}
	};
</script>

<style scoped lang="scss">
	.fontw {
		font-weight: 900;
	}

	.list {
		padding: 40rpx;
		background-color: #ffffff;
		color: #333333;
		font-size: 32rpx;
		margin-bottom: 20rpx;

		.list_left {
			.list_left_top {
				font-size: 36rpx;
				font-weight: bold;
				margin-bottom: 20rpx;
				color: #333333;
			}

			.list_left_bottom {
				color: #333333;
				font-size: 32rpx;

				image {
					width: 30rpx;
					height: 30rpx;
					margin-left: 10rpx;
				}
			}
		}

		.list_right {
			font-size: 32rpx;
			color: #333333;
		}

	}

	.search {
		background-color: #ffffff;

		.searchchild {
			width: 100%;
			box-sizing: border-box;
			padding: 30rpx;
			font-size: 28rpx
		}
	}
</style>